<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
    @if (!courseContentsPage) {
        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
        </ion-button>
    } @else {
        <core-context-menu>
            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
                iconAction="fas-circle-info" />
        </core-context-menu>
    }
</core-navbar-buttons>

<!-- Content. -->
<core-loading [hideUntil]="!showLoading">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [courseId]="courseId" [description]="displayDescription && description"
        [component]="component" [componentId]="componentId" (completionChanged)="onCompletionChange()">
        <div class="addon-mod_resource-afterlink ion-text-wrap" *ngIf="module.afterlink" description>
            <core-format-text [text]="module.afterlink" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
        </div>
    </core-course-module-info>

    <ion-card class="core-warning-card" *ngIf="warning">
        <ion-item>
            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
            <ion-label><span [innerHTML]="warning"></span></ion-label>
        </ion-item>
    </ion-card>

    <ng-container *ngIf="mode === 'iframe'">
        <core-iframe [src]="src" />
    </ng-container>

    <div *ngIf="mode === 'embedded'" class="ion-padding">
        <core-format-text [text]="contentText" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
    </div>

    <ng-container *ngIf="mode === 'external'">
        <ion-list>
            <ion-item class="ion-text-wrap" *ngIf="type">
                <ion-label>
                    <p class="item-heading">{{ 'core.type' | translate }}</p>
                    <p>{{ type }}</p>
                </ion-label>
            </ion-item>

            <ng-container *ngIf="!isExternalFile">
                <ion-item class="ion-text-wrap" *ngIf="readableSize">
                    <ion-label>
                        <p class="item-heading">{{ 'core.size' | translate }}</p>
                        <p>{{ readableSize }}</p>
                    </ion-label>
                </ion-item>

                <ion-item class="ion-text-wrap" *ngIf="timecreated > 0">
                    <ion-label>
                        <p class="item-heading">{{ 'core.datecreated' | translate }}</p>
                        <p>{{ timecreated | coreFormatDate }}</p>
                    </ion-label>
                </ion-item>

                <ion-item class="ion-text-wrap" *ngIf="timemodified > 0">
                    <ion-label>
                        <p class="item-heading">{{ 'core.lastmodified' | translate }}</p>
                        <p>{{ timemodified | coreFormatDate }}</p>
                    </ion-label>
                </ion-item>

                <ion-item class="ion-text-wrap" *ngIf="downloadTimeReadable">
                    <ion-label>
                        <p class="item-heading">{{ 'core.lastdownloaded' | translate }}</p>
                        <p>{{ downloadTimeReadable }}</p>
                        <ion-grid *ngIf="currentStatus === outdatedStatus" class="addon-mod_resource-outdated">
                            <ion-row class="ion-align-items-center">
                                <ion-col size="auto">
                                    <ion-icon color="warning" name="fas-triangle-exclamation" aria-hidden="true" />
                                </ion-col>
                                <ion-col>
                                    <p><strong>{{ 'addon.mod_resource.resourcestatusoutdated' | translate }}</strong></p>
                                </ion-col>
                            </ion-row>
                        </ion-grid>
                    </ion-label>
                </ion-item>
            </ng-container>
        </ion-list>
    </ng-container>

    <div collapsible-footer appearOnBottom *ngIf="!showLoading" slot="fixed">
        <div class="list-item-limited-width" *ngIf="mode === 'external'">
            <ion-button *ngIf="isIOS && (!shouldOpenInBrowser || !isOnline)" expand="block" fill="outline"
                (click)="open(openFileAction.OPEN_WITH)" class="ion-margin ion-text-wrap">
                <ion-icon name="far-share-from-square" slot="start" aria-hidden="true" />
                {{ 'core.openwith' | translate }}
            </ion-button>

            <ion-button expand="block" (click)="open(openFileAction.OPEN)" class="ion-margin ion-text-wrap">
                <ng-container *ngIf="isStreamedFile">
                    <ion-icon name="fas-play" slot="start" aria-hidden="true" />
                    {{ 'core.play' | translate }}
                </ng-container>
                <ng-container *ngIf="!isStreamedFile">
                    <ion-icon name="far-file" slot="start" aria-hidden="true" />
                    {{ 'addon.mod_resource.openthefile' | translate }}
                </ng-container>
            </ion-button>
        </div>
        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
    </div>
</core-loading>
